<script setup lang="ts">
import { ref, inject } from 'vue'
import { setSrcAndPlay, setSrcAndPlayKey, addMusicToListKey, addMusicToList, popMessageKey, popMessage, switchLoginModelShowKey, musicHistory, Music, User } from '@/type';
import { useRouter } from 'vue-router';
import { timeFormat } from '../../utils/index'
import { useStore } from '../../stores/index'
import { storeToRefs } from 'pinia';
const showLoginModel = inject(switchLoginModelShowKey) as () => void
const store = useStore()
const isLogin = storeToRefs(store).loginState
const router = useRouter()
const popMessage = inject(popMessageKey) as popMessage
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const addMusicToList = inject(addMusicToListKey) as addMusicToList
/**
 * musicList 用于显示的歌单列表
 * myMusic 从我的音乐进入特殊显示
 * singer 歌手信息
 * singerModel 歌手页面特殊显示
 * pageSize 歌单列表每页显示数量
 * typeId 歌单类型id e.g 歌单为 list CD 为 cd
 */
const props = defineProps<{
    musicList: Music[],
    myMusic: Boolean,
    singer: User[],
    model: 'singer' | 'musicList' | 'cd' | 'single' | 'search',
    pageSize: number,
    typeId: string,
    delete?: Function,
}>()
const showBtns = ref(-1);
const setCollectMusicId = store.setCollectMusicId
const openCollectModel = store.openCollectModel
// 显示按钮
const changShowBtns = (index: number) => {
    showBtns.value = index;
}
// 去歌手页
const toSingerPage = (id: string) => {
    router.push({
        name: 'singer', params: { id }
    })
}
// 去单曲页
const toSingleMusic = (id: string) => {
    router.push({ name: 'singleMusic', params: { musicId: id } })
}
const showCollectModel = (id: string) => {
    if (isLogin.value != 1) {
        showLoginModel()
        return popMessage('未登录', 'error');
    }
    setCollectMusicId(id)
    openCollectModel()
}
const addMusicToMusicList = (music: Music, index: number) => {
    let musicHistory: musicHistory;
    if (props.model === 'singer' || props.model === 'single' || props.model === 'search') {
        musicHistory = {
            id: music.musicId, url: music.src, name: music.title, duration: music.duration,
            singerName: props.singer[index].name as string, singerId: props.singer[index].id, image: music.image as string,
            from: props.model, typeId: '-1'
        }
        addMusicToList(musicHistory);

    } else {
        if (props.model !== undefined) {
            musicHistory = {
                id: music.musicId, url: music.src, name: music.title, duration: music.duration,
                singerName: props.singer[index].name as string, singerId: props.singer[index].id,
                image: music.image as string, from: props.model, typeId: props.typeId
            }
            addMusicToList(musicHistory);
        }
    }
}
const playNow = (music: Music, index: number) => {
    let musicHistory: musicHistory;
    if (props.model === 'singer' || props.model === 'single') {
        musicHistory = {
            id: music.musicId, url: music.src, name: music.title, duration: music.duration,
            singerName: props.singer[index].name as string, singerId: props.singer[index].id, image: music.image as string
        }
        setSrcAndPlay(musicHistory);

    } else {
        if (props.model !== undefined) {
            musicHistory = {
                id: music.musicId, url: music.src, name: music.title, duration: music.duration,
                singerName: props.singer[index].name as string, singerId: props.singer[index].id,
                image: music.image as string, from: props.model, typeId: props.typeId
            }
            setSrcAndPlay(musicHistory);
        }
    }
}
</script>
<template>
    <div class="topFunc" v-if="props.model == 'singer'">
        <a class="play">
            <img style="height: 20px;" src="../../assets/play-white.svg" alt="">
            <span style="color: white;font-size: 14px;margin-left: 2px;">播放</span>
        </a>
        <a class="add">
            <img style=" height: 22px; width: 22px;" src="../../assets/add-fff.svg" alt="">
        </a>
        <a class="collect" @click="store.openCollectModel">
            <img style="height: 20px;margin-left: 10px;" src="../../assets/collect-999.svg" alt="">
            <span style="color: #666;font-size: 14px;margin-left: 2px;">收藏全部</span>
        </a>
    </div>
    <table class="musicTable">
        <tbody style="flex:1;">
            <tr class="tableTitle" v-if="props.model != 'singer'">
                <th class="t1">
                </th>
                <th class="t2">
                    <span>歌名</span>
                </th>
                <th class="t3">
                    <span>时长</span>
                </th>
                <th v-if="props.model != 'cd'" class="t4">
                    <span>歌手</span>
                </th>
                <th v-if="props.model != 'cd'" class="t5">
                    <span>专辑</span>
                </th>
            </tr>
            <template v-for="music, index of props.musicList">
                <tr v-if="index < props.pageSize" class="item" :class="{ item_singer: props.model == 'singer' }"
                    @mouseover="changShowBtns(index)" @mouseleave="changShowBtns(-1)">

                    <td class="t1">
                        <span class="index">{{ index + 1 }}</span>
                        <img @click="playNow(music, index)" src="../../assets/play.svg">
                    </td>
                    <td class="t2">
                        <a @click="toSingleMusic(music.musicId)">{{ music.title }}</a>
                    </td>
                    <!-- 时长 -->
                    <td class="t3">
                        <a v-if="showBtns != index">{{ timeFormat(music.duration) }}</a>
                        <div v-if="showBtns == index" class="btnList">
                            <img v-if="props.model != 'cd'" @click="addMusicToMusicList(music, index)"
                                src="../../assets/add-999.svg" class="addBtn">
                            <img v-show="!props.myMusic" src="../../assets/collect-999.svg" class="collectBtn"
                                @click="showCollectModel(music.musicId)">
                            <img v-if="props.delete" @click="props.delete(music.musicId)" class="addBtn"
                                src="../../assets/trash-999.svg" />
                        </div>
                    </td>
                    <!-- 歌手 -->
                    <td class="t4" v-if="props.model != 'cd'">
                        <a v-if="props.model != 'singer'" style="cursor: pointer;"
                            @click="toSingerPage(props.singer[index]?.id as string)">{{
                                props.singer[index].name }}</a>
                    </td>
                    <td class="t5" v-if="props.model != 'cd'">
                        <a href="">未作 </a>
                    </td>
                </tr>
            </template>

        </tbody>
    </table>
</template>
<style lang="css" scoped>
/* 以下为singerModel特殊样式 */
.item_singer:first-child {
    border-top: 1px solid #ddd;
}

/* 以上为singerModel特殊样式 */
.collect:hover {
    background-color: #FCFCFC;
}

.collect {
    height: 32px;
    width: 99px;
    display: inline-flex;
    background-color: #f3f3f3;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #666;
    align-items: center;
    margin: 0 5px;
    border-radius: 5px;
}

.topFunc {
    margin: 10px 0;
}

.play:hover,
.add:hover {
    background-color: var(--blue-style-hover);
}

.collect,
.play,
.add {
    cursor: pointer;
}

.add {
    height: 30px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    background-color: var(--blue-style);
    padding: 0px 0px 2px 4px;
    border-radius: 0 5px 5px 0;
}

.play {
    background-color: var(--blue-style);
    display: inline-flex;
    align-items: center;
    padding: 1px 0px 1px 10px;
    border-radius: 5px 0 0 5px;
    height: 30px;
    width: 60px;
    border-right: 2px solid #4483bf;
}

.index {
    width: 15px;
    text-align: center;
}

.btnList {
    display: flex;
    align-items: center;
}

.addBtn,
.collectBtn {
    cursor: pointer;
}

.collectBtn {
    width: 18px;
    height: 18px;
}

.addBtn {
    width: 18px;
    height: 18px;
}

.tableTitle th {
    display: flex;
    justify-content: start;
    align-items: center;
}

.tableTitle th span {
    padding-left: 2px;
}

.t1 {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.t1 img {
    height: 20px;
    width: 20px;
}

.item .t1 img {
    cursor: pointer;
}

.item .t2 {
    padding-left: 4px;
}

.t2 {
    flex: 4;
}

.t3 {
    flex: 2;

}

.t4 {
    flex: 1.5;

}

.t5 {
    flex: 2;

}

.musicTable {
    display: flex;
}

.musicTable tr {
    display: flex;
}

.item .t2 {
    cursor: pointer;
}

.item {
    height: var(--table-height);
    font-size: 12px;
    display: flex;
    align-items: center;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.musicTable tr:nth-child(n + 1) {
    background-color: rgb(240, 240, 240);
}

.musicTable tr:nth-child(2n + 1) {
    background-color: white;
}

.musicTable th {

    height: var(--table-title-height);
    line-height: var(--table-title-height);
    box-sizing: border-box;
    float: left;
    border-right: 1px solid #ddd;
    border-top: 2px solid var(--red-style);
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
}

.musicTable a {
    text-decoration: none;
    color: #333;
}
</style>